<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<!-- <meta name="viewport"
            content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> -->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1F, user-scalable=no"
		/>
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<!-- 参考链接: https://juejin.cn/post/6844903655045333000#heading-19 -->
		<script>
			;(function flexible(window, document) {
				var docEl = document.documentElement
				var dpr = window.devicePixelRatio || 1

				// adjust body font size
				function setBodyFontSize() {
					if (document.body) {
						document.body.style.fontSize = 12 * dpr + 'px'
					} else {
						document.addEventListener(
							'DOMContentLoaded',
							setBodyFontSize,
						)
					}
				}
				setBodyFontSize()

				// set 1rem = viewWidth / 10
				function setRemUnit() {
					var rem = docEl.clientWidth / 10
					docEl.style.fontSize = rem + 'px'
				}

				setRemUnit()

				// reset rem unit on page resize
				window.addEventListener('resize', setRemUnit)
				window.addEventListener('pageshow', function (e) {
					if (e.persisted) {
						setRemUnit()
					}
				})

				// detect 0.5px supports
				if (dpr >= 2) {
					var fakeBody = document.createElement('body')
					var testElement = document.createElement('div')
					testElement.style.border = '.5px solid transparent'
					fakeBody.appendChild(testElement)
					docEl.appendChild(fakeBody)
					if (testElement.offsetHeight === 1) {
						docEl.classList.add('hairlines')
					}
					docEl.removeChild(fakeBody)
				}
			})(window, document)
		</script>

		<div class="content">
			<style>
				.content {
					width: 10rem;
					height: 200px;
					background-color: red;
					border: 5px solid yellow;
					box-sizing: border-box;
				}
				.div {
					font-size: 0.5rem;
				}
			</style>
			<div class="div">haha</div>
		</div>
	</body>
</html>
